<template>
	<view>
		<!-- https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/2968d12b-527c-4ea6-9ff6-a8c91f86406b.json -->
		<c-lottie
		ref="cLottieRef"
			src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/2968d12b-527c-4ea6-9ff6-a8c91f86406b.json'
			width="750rpx" height='1000rpx' :loop="true"></c-lottie>
		<view class="content">
			<view>播放暂停</view>
			<view class="btnBox">
				<button @click="cLottieRef.call('play')" size="mini">播放</button>
				<button @click="cLottieRef.call('setDirection',-1)" size="mini">反向播放</button>
				<button @click="cLottieRef.call('pause')" size="mini">暂停播放</button>
				<button @click="cLottieRef.call('stop')" size="mini">停止播放</button>
			</view>
			<view>播放速度</view>
			<view class="btnBox">
				<button @click="cLottieRef.call('setSpeed',1)" size="mini">播放速度1x</button>
				<button @click="cLottieRef.call('setSpeed',2)" size="mini">播放速度2x</button>
			</view>
			<view>播放其它设置</view>
			<view class="btnBox">
				<button @click="cLottieRef.call('goToAndStop',[2000,false])" size="mini">跳转到2s并暂停</button>
				<button @click="cLottieRef.call('goToAndPlay',[2000,false])" size="mini">跳转到2s并播放</button>
			</view>
			<view class="btnBox">
				<button @click="cLottieRef.call('goToAndStop',[2,true])" size="mini">跳转到第2帧并暂停</button>
				<button @click="cLottieRef.call('goToAndPlay',[2,true])" size="mini">跳转到第2帧并播放</button>
			</view>
			<view class="btnBox">
				<button @click="cLottieRef.call('playSegments',[[10,20],false])" size="mini">播放完之前的片段，播放10-20帧</button>
			</view>
			<view class="btnBox">
				<button @click="cLottieRef.call('playSegments',[[[0,5],[10,18]],true])" size="mini">直接播放0-5帧和10-18帧</button>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	const cLottieRef = ref()
</script>

<style lang="scss">
	.page{
		width: 100vw;
		overflow-x: hidden;
	}
	.content{
		padding: 20rpx;
		font-size: 28rpx;
	}
	.btnBox{
		width: 100%;
		display: flex;align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
</style>
